<template>
  <div>
    <div v-for="(item, index) in sum" :key="index" @click="back(item, index)">
      <!-- <div @click="back" > -->
      <div class="nav" :class="{ red: (item.activeIndex = 0) }">
        <!-- {{ labelText }} -->
        {{ item.text }}
      </div>
      <div class="box"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["labelText"],
  data() {
    return {
      sum: [
        {
          text: "攻略"
        },
        {
          text: "酒店"
        },
        {
          text: "机票"
        }
      ]
    };
  },
  methods: {
    back(item, num) {
      console.log("按钮被点击了");
      this.$set(item, "activeIndex", num);
      this.$emit("clicked");
    }
  }
};
</script>

<style lang="less" scoped>
.nav {
  float: left;
  width: 90px;
  height: 40px;
  background: rgba(0, 0, 0, 0.4);
  text-align: center;
  line-height: 40px;
}
.box {
  float: left;
  width: 1px;
  //   height: 1px;
  //   border: 100px solid #ccc;
  border-right: 10px solid transparent;
  border-bottom: 40px solid rgba(0, 0, 0, 0.4);
  border-top: 0 solid;
  border-left: 0 solid;
}
.red {
  background: violet;
}
</style>
